<template>
  <div class="out">
    <div class="position">
      <div class="container">
        <div class="top">
          <div class="tilte">当前播放</div>
          <div class="number">({{ store.state.index.songList.length }})</div>
        </div>
        <div class="use">
          <div class="type">
        <span class="iconfont icon-xunhuan">
          </span>
            <span class="play-name">列表循环</span>
          </div>
          <div class="operation">
            <span class="iconfont icon-xiazai"></span>
            <span class="iconfont icon-tianjia"></span>
            <span class="iconfont icon-shanchu"></span>
          </div>
        </div>
        <div class="content">
          <div :class="['item', song == store.state.index.songInfo?'active':'']" v-for="song in store.state.index.songList"
               @click="methods.playAudio2">
            <div class="info" @click="store.dispatch('changeSong',song)">
              <span class="song-name">{{ song.name }}</span>
              <span class="division">-</span>
              <span>
                <span :class="['ar-name',song == store.state.index.songInfo?'active':'']" v-for="item in song.ar"
                      :key="item.id">{{ item.name }}
                </span>
              </span>
            </div>
            <div class="icon-cuowuguanbiquxiao iconfont"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="overlay"></div>
  </div>
</template>


<script setup>
import store from '../../store/index.js'
import {onMounted} from "vue";
import methods from "../../utils/methods.js";
// const play = () => {
//   let audio = document.getElementById('audio');
//   audio.play();
//   store.commit("setIsPlay",true);
// }


onMounted(() => {

  let overlay = document.querySelector('.overlay');
  let out = document.querySelector('.out');
  overlay.addEventListener('touchend', () => {
        out.style.top = '100%'
      }
      ,
      false
  );
  let container = document.querySelector(".position");
  container.style.transition = 'top .3s';
  container.addEventListener('touchstart', (e) => {
        container.style.transition = '';
        let clickY = e.changedTouches[0].screenY;
        let top = container.offsetTop;
        container.addEventListener('touchmove', (e) => {
          if (clickY > e.changedTouches[0].screenY)
            container.style.top = '250px';
          else
            container.style.top = top - clickY + e.changedTouches[0].screenY + 'px';
        })
      }
      ,
      false
  );
  container.addEventListener("touchend", () => {
    if (parseInt(container.style.top) > 350) {
      container.style.transition = 'top .3s';
      out.style.top = '100%';
      container.style.top = '250px';
    } else if (parseInt(container.style.top) > 250) {
      container.style.top = '250px';
    }
  })
  let content = document.querySelector(".content");
  content.addEventListener('touchstart', (e) => {
        let clickY = e.changedTouches[0].screenY;
        content.ontouchmove=(e) => {
          if (content.scrollTop === 0) {
            clickY = e.changedTouches[0].screenY;
            content.ontouchmove=(e) => {}
            container.addEventListener('touchmove', (e) => {
              if (clickY > e.changedTouches[0].screenY)
                container.style.top = '250px';
              else
                container.style.top = 250 - clickY  + e.changedTouches[0].screenY + 'px';
            })
            return;
          }
          if (clickY < e.changedTouches[0].screenY) {
            container.addEventListener('touchmove', (e) => {
              container.style.top = '250px';
            })
          }
        }
      }
      ,
      false
  );

})

</script>


<style scoped lang="scss">
.out {
  z-index: 51;
  //background: rgba(0, 0, 0, .2);
  //height: 100vh;
  //width: 100vw;


  .position {
    position: absolute;
    top: 250px;
    width: 100%;
    z-index: 9;

    .container {
      opacity: 1;
      background: #fff;
      margin: 0 20px;
      padding: 10px;
      border-radius: 10px;

      .top {
        display: flex;
        align-items: flex-end;

        .title {
          font-weight: 550;
        }

        .number {
          padding-left: 3px;
          font-size: 12px;
          color: #666;
        }
      }

      .use {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;

        .type {
          .iconfont {
            color: #666;
            font-size: 16px;
          }

          .play-name {
            padding-left: 5px;
            font-size: 14px;

          }
        }

        .operation {
          .iconfont {
            color: #888;
            padding-left: 15px;
            font-size: 20px;
          }
        }


      }

      .content {
        max-height: 310px;
        min-height: 310px;
        overflow: scroll;

        .item {
          display: flex;
          padding: 8px 0;
          align-items: center;

          .info {
            display: flex;
            align-items: center;
            flex: 1;
            font-size: 14px;
            height: 20px;

            overflow: hidden; /*内容溢出隐藏*/
            text-overflow: ellipsis; //*溢出的文本显示为...*/
            display: -webkit-box; /*将div转换为盒子模型*/
            -webkit-line-clamp: 1; /*设置div的文本为2行*/
            -webkit-box-orient: vertical; /*从顶部向底部垂直布置子元素*/
            .division {
              padding: 0 5px;
            }

            .ar-name {
              color: #666;
              font-size: 12px;
            }

            // 给名字增加伪元素
            .ar-name:not(:last-child)::after {
              content: "/";
            }
          }

          .iconfont {
            color: #666;
            font-size: 20px;
          }
        }

        .active {
          color: #FF7F50 !important;
        }
      }
    }
  }


  .overlay {
    position: relative;
    top: 0px;
    z-index: 8;
    background: rgba(0, 0, 0, .2);
    height: 100vh;
    width: 100vw;
  }
}


</style>
